import { defineStore } from 'pinia'
import {
  styleConfigType,
  pageChangeModelType,
  layoutModelType
} from '~/types/style'
import { useTheme } from '@/store/modules/theme'
import { setStorage, getStorage, removeStorage } from '@/utils/storage'
import { setHtmlTheme } from '@/utils/theme/setTheme'

import { TabsModelType } from '~/types/tabs'
import { darkMode } from '~/types/theme'
import { snakeCase } from 'lodash-es'

export const useStyle = defineStore('style', {
  state: () => {
    return {
      styleConfig: {
        // 是否显示设置弹出框
        show: false,
        // nav布局模式
        layoutType:
          (getStorage('LAYOUT_TYPE') as layoutModelType) ||
          layoutModelType.Common,
        // 是用户自己改变的布局模式还是分辨率变化自动改变的
        isLayoutTypeChangeByUser: true,
        // tabs导航栏模式
        tabsModel:
          (getStorage('TABS_MODEL') as TabsModelType) || TabsModelType.ModelOne,
        // 页面切换动画模式
        pageChangeModel:
          (getStorage('PAGE_CHANGE_MODEL') as pageChangeModelType) ||
          pageChangeModelType.fade
      }
    }
  },
  actions: {
    /**
     * @description: 修改风格
     * @param {string} property
     * @param {darkMode} value
     */
    setStyle(
      property: string,
      value: layoutModelType | TabsModelType | pageChangeModelType | boolean,
      notSaveAtStorage = false
    ): void {
      // 保存到缓存中
      if (!notSaveAtStorage) {
        const storageName = snakeCase(property).toUpperCase()
        setStorage(storageName, value)
      }
      this.styleConfig[property] = value
      // console.log('styleConfig.property', property, value, storageName)
    },
    resetStyle() {
      this.setStyle('pageChangeModel', pageChangeModelType.fade, true)
      this.setStyle('tabsModel', TabsModelType.ModelOne, true)
      this.setStyle('layoutType', layoutModelType.Common, true)
    },
    clearStyleStorage() {
      removeStorage('pageChangeModel')
      removeStorage('tabsModel')
      removeStorage('layoutType')
    }
  }
})
